import Taro,{Component} from "@tarojs/taro"
import styles from './index.module.scss'
import { View, Image, Input, Button } from "@tarojs/components"
import {connect} from '@tarojs/redux'
import HOME_BANNER from '@/assets/img/home_banner.png'
import HOME_EDIT from '@/assets/img/home_edit.png'
import { AtIcon } from 'taro-ui'
import { telTimeFun } from '@/actions/login'
import { toggleSign, setInfo } from '@/actions/user'
import ServiceOnline from '@/components/ServiceOnline'

@connect(({user}) => ({
  isLogin: user.isLogin,
  isSign: user.isSign,
  info: user.info
}), dispatch => ({
  setInfo: (data) => dispatch(setInfo(data)),
  telTimeFun: (data) => dispatch(telTimeFun(data))
}))
class Home extends Component {

  config = {
    navigationBarTitleText: ''
  }

  state = {
    genderObj: {
      0: '未知',
      1: '男性',
      2: '女性'
    }
  }

  constructor(props){
    super(props)
  }

  componentDidShow = () => {
    this.goPersonal()
  }

  componentWillMount = () => {
  }

  goPersonal = async () => {
    const { isSign, setInfo } = this.props
    const { scene } = this.$router.params
    scene && setInfo({merchantId: scene})
    if (isSign) return Taro.reLaunch({url: '/pages/taskSquare/index'})
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
  }

  onGetUserInfo = (e) => {
    const { genderObj } = this.state
    const { setInfo, isLogin } = this.props
    if (e.detail.errMsg === 'getUserInfo:ok') {
      Taro.showLoading({title: '获取个人信息中'})
      Taro.getUserInfo({
        lang: "zh-CN",
        success(res) {
          setInfo({...res.userInfo, genderName: genderObj[res.userInfo.gender]})
          if (!isLogin) {
            telTimeFun(0)
            return Taro.reLaunch({url: '/pages/login/index'})
          }
          Taro.navigateTo({ url: '/pages/sign/index'})
        },
        fail(err) {
          Taro.showToast({title: '获取用户信息失败:' + err.Msg, icon: 'none'})
        },
        complete: function() {
          Taro.hideLoading()
        }
      })
    }
  }

  callPhone = (phone) => {
    Taro.makePhoneCall({phoneNumber: phone})
  }

  render () {
    return (
      <View className={styles.wrapper}>
        <View className={styles.containerWrapper}>
          <View className={styles.bannerWrapper}>
            <Image src={HOME_BANNER} className={styles.bannerImg}></Image>
          </View>
          <View className={styles.signWrapper}>
            <View className={styles.editWrapper}>
              <Image src={HOME_EDIT} className={styles.editImg}></Image>
            </View>
            <View className={styles.signContent}>
              <View className={styles.signTitle}>立即签约</View>
              <View className={styles.signDesc}>需与椰云众包签约后才能享受服务</View>
            </View>
            <View className={styles.rightWrapper}>
              <AtIcon value={'iconfont icon-right'} color="#b9b6b9" size="30"></AtIcon>
            </View>
            <Button openType="getUserInfo" onGetUserInfo={this.onGetUserInfo} className={styles.getuserinfo} ></Button>
          </View>
          <View className={styles.descWrapper}>
            <View className={styles.title}>椰云众包平台</View>
            <View className={styles.content}>椰云众包平台，定位于数字共享经济的众包服务平台，为众包企业和网络平台自由职业者提供“人力资源服务外包、管理、收入结算及报税”等综合服务，助力新经济发展，服务千万众包企业，普惠大众民生。</View>
          </View>
        </View>
        <View className={styles.footerWrapper}>联系客服： <Text className={styles.mobile} onClick={() => this.callPhone("4000096337")}>400-009-6337</Text></View>
        <View className={styles.serviceOnline}>
          <ServiceOnline/>
        </View>
      </View>
    )
  }
}

export default Home
